<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formConfig.dataObj" class="fixed-label-width">
    <el-form-item label="菜品名称" prop="foodName">
      <el-input v-model="formConfig.dataObj.foodName" />
    </el-form-item>
    <el-form-item label="图片" prop="images">
      <!-- <upload ref="uploadRef" :imageUrl="formConfig.dataObj.images"/> -->
      <span>缺少上传图片接口</span>
    </el-form-item>
    <el-form-item label="店铺" prop="storeId">
      <el-select v-model="formConfig.dataObj.storeId" placeholder="店铺" filterable @change="changeStore">
        <el-option v-for="item in storeList" :key="item.storeId" :label="item.storeName" :value="item.storeId" />
      </el-select>
    </el-form-item>
    <el-form-item label="价格" prop="storePrice">
      <el-input v-model="formConfig.dataObj.storePrice" type="number" />
      <span style="margin-left: 10px; color: #888">(元 / 份)</span>
    </el-form-item>
    <el-form-item label="菜品描述" prop="description">
      <el-input v-model="formConfig.dataObj.description" />
    </el-form-item>
    <!-- <el-form-item label="状态" prop="status">
      <el-switch v-model="formConfig.dataObj.statusFlag" inline-prompt size="large"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="上架" inactive-text="下架" />
    </el-form-item> -->
  </el-form>

  <div class="dialog-footer my-dialog-foot">
    <hz-button type="primary" @click="clickSubmit">确定</hz-button>
    <hz-button @click="clickCancle">取消</hz-button>
  </div>
</template>
<script setup>
import { ref, reactive, watchEffect, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import upload from '@/views/common/upload.vue'
import { ElMessage } from 'element-plus'

const store = useStore();
const { proxy } = getCurrentInstance();
const props = defineProps({
  formConfig: {
    default: {
      dataObj: {},
      dialog: {},
      type: '',
      okCallback: () => {},
      noCallback: () => {},
    }
  },
  storeList: {type: Array},
});

props.formConfig.dataObj.statusFlag = props.formConfig.dataObj.status == '1';
const emits = defineEmits(["successCallback", 'cancleCallback']);
const ruleFormRef = ref(null);
const uploadRef = ref(null);

// 表单校验规则
const rules = reactive({
  foodName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  storeId: [{ required: true, message: "店铺不能为空", trigger: "blur" }],
  storePrice: [{ required: true, message: "合作价格不能为空", trigger: "blur" }],
});

initData();

/* ---------methods--------- */

// 初始赋值
function initData() {
  let dataObj = props.formConfig.dataObj
  let obj = props.storeList.find(val => val.storeId == dataObj.storeId)
  if (!obj && props.storeList[0]) {
    dataObj.storeId = props.storeList[0].storeId
  }
}

// 改变了店铺
function changeStore(storeId) {
  let obj = props.storeList.find(val => val.storeId == storeId) || {};
  props.formConfig.dataObj.storeName = obj.storeName
}

// 获取要保存的数据
function getSubmitParam() {
  let params = { ...props.formConfig.dataObj}
  // let {resultName, url} = uploadRef.value.image
  // params.image = resultName ? resultName : url;   // resultNamez存在说明重新上传了图片
  // params.status = params.statusFlag ? 1 : 2;
  // delete params.statusFlag;

  console.log(params)
  if (!params.images) {
    // ElMessage.warning('请上传菜品图片')
    // return
  }
  // 属于编辑
  if (params.foodId) {
    params.id = params.foodId;
    delete params.foodId
  }
  params.images = [];
  return params
}


// 点击确定，提交数据
function clickSubmit() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      submitAdd();
    } else {
      console.log('提交校验不通过', fields)
    }
  })

}

// 提交新增\编辑，区别在于编辑时会多带foodId数据
function submitAdd() {
  let params = getSubmitParam();
  if (!params) {
    return;
  }
  proxy.$http.post('/company/foodManage/addOrUpdateFood', params, { successTip: true }).then(res => {
    if (res.code == 200) {
      props.formConfig.dialog.show = false;
      props.formConfig.okCallback();
    }
  })
}

// 点击取消的回调
function clickCancle() {
  props.formConfig.dialog.show = false;
}

// 对外暴露数据
defineExpose({});
</script>

<style lang="scss" scoped></style>
